import React, { useState } from 'react';
import { Space, Table, Tag, Popconfirm, Button, Modal} from 'antd';
import type { TableProps } from 'antd';
import type { listTS } from '../../store/listTS'
import { useAppDispatch, useAppSelector } from '../../store/getstateTs'
import * as asyncfn from '../../store/slice'
import Activeform from './activeform';
import dayjs from 'dayjs';
const Issue: React.FC = () => {
    let dispatch = useAppDispatch();
    let { list } = useAppSelector((state) => {
        return state.crms1;
    });
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [title, setTitle] = useState('添加')
    const [itemobj, setItemobj] = useState({})

    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    let [current, sestCurrent] = useState('1')
    let [pageSize, setSize] = useState('2')
    let [total] = useState(list.length)
    const columns: TableProps<listTS>['columns'] = [
        {
            title: '优惠券名称',
            dataIndex: 'title',
        },
        {
            title: '优惠券面值',
            dataIndex: 'facevalue',
        },
        {
            title: '优惠券最低消费',
            dataIndex: 'consume',
        },
        {
            title: '优惠券有效期限',
            dataIndex: 'deadline',
        },
        {
            title: '排序',
            dataIndex: 'sort',
        },
        {
            title: '状态',
            dataIndex: 'state',
            render: (state) => {
                return <Tag color={state ? 'skyblue' : 'pink'}>{state ? '开启' : '关闭'}</Tag>
            },
        },
        {
            title: '创建时间',
            dataIndex: 'time',
            render: (time) => {
                return dayjs(time).format('YYYY-MM-DD HH:mm:ss ')
            }
        },
        {
            title: '操作',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        showModal()
                        setTitle('编辑参数')
                        setItemobj(record)
                    }}>修改</a>
                    <Popconfirm
                        title="删除"
                        description="确定删除?"
                        onConfirm={() => {
                            dispatch(asyncfn.async_dellist(record.id))
                        }}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a>删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    return (
        <div>
            <Button style={{ marginBottom: '10px' }} onClick={() => {
                showModal()
                setTitle('添加参数')
                setItemobj({})
            }} type="primary">添加</Button>
            <Modal
                title={title}
                closable={{ 'aria-label': 'Custom Close Button' }}
                open={isModalOpen}
                onCancel={handleCancel}
                footer={null}
            >
                <Activeform onCancel={handleCancel} key={new Date().getTime()} title={title} itemobj={itemobj} />
            </Modal>
            <Table<listTS> columns={columns} dataSource={list} rowKey={"id"}
                pagination={{
                    current, pageSize, total, pageSizeOptions: [1, 2, 3], showSizeChanger: true, showQuickJumper: true,
                    onChange: (page, pageSize) => {
                        sestCurrent(page)
                        setSize(pageSize)
                    }
                }} />
        </div>
    )
}

export default Issue